@import '../../css/imports/colors'

.circle
  border-radius: 50%
.main
  &.index
    position: relative
    background: #000
    padding-top: 1px
    text-align: center

    .overlay
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      background: rgba(100, 100, 100, .5)
      z-index: 5
      text-align: center
      .connect
        @extend .circle
        display: inline-block
        height: 80vh
        width: 80vh
        font-size: 30px
        margin-top: 12vh
        background: blue
        .text
          position: relative
          top: 50%
          transform: translateY(-50%)
          .error
            color: red
            font-size: 15px

    .gauges
      @extend .circle
      position: relative
      width: 350px
      height: 350px
      display: inline-block
      margin-top: 12vh
      border: 2px solid blue
      .throttle
        @extend .circle
        position: absolute
        top: 1%
        left: 1%
        width: 98%
        height: 98%
        background: rgba(68, 222, 207, .6)
        padding: 1%

      .rpm
        @extend .circle
        position: absolute
        top: 10%
        left: 10%
        width: 80%
        height: 80%
        background: black
        padding: 2.5%


      .vss
        @extend .circle
        position: absolute
        top: 25%
        left: 25%
        width: 50%
        height: 50%
        text-align: center
        .text
          @extend .circle
          font-size: 80px
          position: relative
          top: 50%
          transform: translateY(-50%)
          color: blue
        .speed
          position: absolute
          bottom: 20px
          left: 40%
